@import "~scss/variables";

.sw-simple-search-field {
    position: relative;
    outline: none;
    height: 100%;

    .mt-field.sw-simple-search-field__input {
        height: 100%;
        margin-bottom: 0;

        .mt-block-field__block {
            min-height: auto;
            height: 100%;
        }
    }

    .sw-simple-search-field__input.sw-simple-search-field--default {
        .mt-block-field__block {
            border: none;
            box-shadow: none;
        }

        input {
            border-radius: 24px;
            background-color: $color-gray-100;
        }

        &.mt-field--default {
            input {
                padding: 13px 17px;
            }
        }

        &.mt-field--medium {
            input {
                padding: 9px 17px;
            }
        }

        &.mt-field--small {
            input {
                padding: 5px 17px;
            }
        }
    }

    .sw-simple-search-field__input.sw-simple-search-field--inverted {
        .mt-block-field__block {
            border: 1px solid $color-gray-300;
            box-shadow: 0 0 4px $color-gray-50;
        }

        &.has--error {
            border: 1px solid $color-gray-300;
            box-shadow: 0 0 4px $color-gray-50;
        }

        &.has-focus {
            border: 1px solid $color-gray-300;
            box-shadow: 0 0 4px $color-gray-50;
        }

        input {
            background-color: $color-gray-100;
        }
    }

    .sw-simple-search-field__search-icon,
    .mt-icon {
        color: $color-gray-700;
        transform: translate(0, -50%);
        position: absolute;
        right: 18px;
        top: 50%;
    }

    .mt-field--small {
        input {
            padding: 6px 17px 7px;
        }
    }
}
